import React, { memo, useMemo } from 'react';
import { Col, Form, Row, Button } from 'antd';
import moment from 'moment';
import { useWorkFlow } from '@/hooks';
import { useInterviewWay } from '@/pages/RecruitEmail/hooks';
import styles from './index.less';

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 }
};

const ViewContent = ({ data = {}, dimissionInfo = {}, style = {}, appendRow = null }) => {
    const { interviewerEmployeeInfo = [] } = data;
    const { workFlowTag, processInstanceId } = dimissionInfo;
    const { view } = useWorkFlow({ launchParam: { type: workFlowTag } });
    const getTimeRange = useMemo(() => {
        if (data.interviewStartTime && data.interviewEndTime) {
            return `${moment(data.interviewStartTime).format('YYYY-MM-DD HH:mm')} - ${moment(
                data.interviewEndTime
            ).format('HH:mm')}`;
        }
        return '--';
    }, [data]);

    const [wayLabel, wayDetail] = useInterviewWay({
        interviewWay: data.interviewWay,
        interviewLocation: data.interviewLocation,
        videoLink: data.videoLink
    });

    return (
        <Form {...formItemLayout} style={{ width: 725, ...style }} className={styles.formWrap}>
            <Row>
                <Row>
                    <Col span={12}>
                        <Form.Item label="参与人">
                            {interviewerEmployeeInfo.map(item => item.employeeName).join('、')}
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="面谈时间">{getTimeRange}</Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item label="面谈方式">{data.interviewWayName}</Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="关联申请">
                            <Button
                                type="link"
                                style={{ padding: 0 }}
                                onClick={() => {
                                    view({ processInstanceId });
                                }}
                            >
                                离职申请 - {data.employeeName}
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <Form.Item label={wayLabel} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }}>
                            {wayDetail}
                        </Form.Item>
                    </Col>
                </Row>
                {appendRow}
            </Row>
        </Form>
    );
};
export default memo(ViewContent);
